<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online VSCode Editor</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #1e1e1e; /* 黑色背景 */
            font-family: Arial, sans-serif;
        }
        #container {
            width: 95%;
            height: 95%; /* 增加编辑器高度 */
            border: 2px solid #333;
            border-radius: 10px;
            overflow: hidden;
        }
        /* 悬浮块样式 */
        #floating-panel {
            position: fixed;
            bottom: 15px;
            right: 15px;
            background-color: rgba(30, 30, 30, 0.8);
            border: 1px solid #333;
            border-radius: 5px;
            padding: 6px;
            z-index: 1000; /* 确保悬浮块在最上层 */
        }
        select {
            background-color: #333;
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 5px;
            margin: 5px;
        }
        /* 手机设备自适应 */
        @media (max-width: 768px) {
            #container {
                width: 100%;
                height: 95%;
            }
        }
    </style>
</head>
<body>

<div id="container"></div>

<div id="floating-panel">
    <label for="language-select">代码语言:</label>
    <select id="language-select">
        <option value="shell">Shell</option>
        <option value="javascript">JavaScript</option>
        <option value="python">Python</option>
        <option value="java">Java</option>
        <option value="cpp">C++</option>
        <option value="typescript">TypeScript</option>
        <option value="json">JSON</option>
        <option value="yaml">YAML</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="php">PHP</option>
        <option value="ruby">Ruby</option>
        <option value="go">Go</option>
        <option value="rust">Rust</option>
        <option value="swift">Swift</option>
        <option value="kotlin">Kotlin</option>
    </select>
    <label for="page-language-select">页面语言:</label>
    <select id="page-language-select">
        <option value="zh">中文</option>
        <option value="en">English</option>
        <!-- 可以添加更多语言选项 -->
    </select>
</div>

<!-- Monaco Editor CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/loader.min.js"></script>
<script>
    require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs' }});
    require(['vs/editor/editor.main'], function() {
        var editor = monaco.editor.create(document.getElementById('container'), {
            value: `// Welcome to Monaco Editor\nfunction helloWorld() {\n\tconsole.log('Hello, world!');\n}`,
            language: 'shell',  // 默认语言
            theme: 'vs-dark',
            automaticLayout: true,
            lineNumbers: 'on',
            roundedSelection: false,
            scrollBeyondLastLine: false,
            readOnly: false,
            fontSize: 16,
            wordWrap: 'on',
            minimap: { enabled: false },
            matchBrackets: 'always',
            find: {
                addExtraSpaceOnTop: false,
                highlightSearchTerms: true,
            },
        });

        // 更新编辑器语言
        document.getElementById('language-select').addEventListener('change', function() {
            const selectedLanguage = this.value;
            monaco.editor.setModelLanguage(editor.getModel(), selectedLanguage);
        });

        // 页面语言选择逻辑（可扩展）
        document.getElementById('page-language-select').addEventListener('change', function() {
            const selectedPageLanguage = this.value;
            // 根据选择的页面语言进行相应的操作
            console.log(`页面语言选择: ${selectedPageLanguage}`);
        });

        function openSearch() {
            editor.focus();
            setTimeout(function() {
                editor.getAction('actions.find').run();
            }, 100);
        }

        monaco.editor.defineTheme('vs-dark', {
            base: 'vs-dark',
            inherit: true,
            rules: [
                { token: '', foreground: 'D4D4D4', background: '1E1E1E' },
                { token: 'string', foreground: 'CE9178' },
                { token: 'keyword', foreground: '569CD6' },
                { token: 'number', foreground: 'B5CEA8' },
                { token: 'comment', foreground: '6A9955' },
                { token: 'findMatchHighlight', background: '515C6A', foreground: 'D4D4D4' },
            ],
            colors: {
                'editor.background': '#1E1E1E',
                'editor.findMatchHighlightBackground': '#264F78',
                'editor.lineHighlightBackground': '#2C2C2C',
                'editorCursor.foreground': '#A7A7A7',
            }
        });

        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyF, openSearch);
    });
</script>

</body>
</html>